<script lang="ts" setup>
import {computed} from 'vue'
import {CloudServerOutlined, DatabaseOutlined} from '@ant-design/icons-vue'
import {formatFileSize} from '@/utils/format'

interface Props {
  // 已使用空间（字节）
  used: number
  // 总容量（字节）
  total: number
  // 显示模式
  mode?: 'compact' | 'detailed' | 'card'
  // 标签
  label?: string
}

const props = withDefaults(defineProps<Props>(), {
  mode: 'compact',
  label: '存储空间'
})

// 计算使用百分比
const percentage = computed(() => {
  if (!props.total || props.total <= 0) return 0
  const percent = Math.round((props.used / props.total) * 100)
  return Math.min(percent, 100) // 确保不超过100%
})

// 剩余空间
const remaining = computed(() => {
  return Math.max(props.total - props.used, 0)
})

// 格式化显示文本
const usedText = computed(() => formatFileSize(props.used))
const totalText = computed(() => formatFileSize(props.total))
const remainingText = computed(() => formatFileSize(remaining.value))

// 获取进度条状态
const getStatus = () => {
  if (percentage.value >= 95) return 'exception'
  if (percentage.value >= 80) return 'normal'
  return 'active'
}

// 获取进度条颜色
const getProgressColor = () => {
  if (percentage.value >= 95) return '#ff4d4f'
  if (percentage.value >= 90) return '#fa8c16'
  if (percentage.value >= 80) return '#faad14'
  return '#52c41a'
}

// 获取警告信息
const getWarningMessage = () => {
  if (percentage.value >= 95) {
    return '存储空间严重不足！请及时清理不需要的图片或升级空间容量。'
  }
  if (percentage.value >= 90) {
    return '存储空间即将用完！剩余空间不足10%，建议及时清理。'
  }
  return '存储空间使用率较高，建议定期清理不需要的图片。'
}

// 生成饼图样式（使用CSS conic-gradient）
const getPieChartStyle = () => {
  const usedPercent = percentage.value
  const color = getProgressColor()
  return {
    background: `conic-gradient(
      ${color} 0% ${usedPercent}%,
      #f0f0f0 ${usedPercent}% 100%
    )`
  }
}
</script>

<template>
  <div class="storage-display">
    <!-- 紧凑模式：仅显示进度条和数字 -->
    <template v-if="mode === 'compact'">
      <div class="storage-compact">
        <div class="storage-header">
          <span class="storage-label">{{ label }}</span>
          <span class="storage-value">{{ usedText }} / {{ totalText }}</span>
        </div>
        <a-progress
            :percent="percentage"
            :status="getStatus()"
            :stroke-color="getProgressColor()"
        />
      </div>
    </template>

    <!-- 详细模式：显示详细信息和图表 -->
    <template v-else-if="mode === 'detailed'">
      <a-card :bordered="false" class="storage-detailed">
        <template #title>
          <div class="card-title">
            <DatabaseOutlined/>
            <span>{{ label }}</span>
          </div>
        </template>

        <a-row :gutter="24">
          <!-- 左侧：进度条和数字 -->
          <a-col :span="14">
            <div class="storage-info">
              <div class="storage-main">
                <div class="size-display">
                  <div class="size-item">
                    <span class="size-label">已使用</span>
                    <span class="size-value used">{{ usedText }}</span>
                  </div>
                  <div class="size-divider">/</div>
                  <div class="size-item">
                    <span class="size-label">总容量</span>
                    <span class="size-value total">{{ totalText }}</span>
                  </div>
                </div>

                <a-progress
                    :percent="percentage"
                    :status="getStatus()"
                    :stroke-color="getProgressColor()"
                    :stroke-width="12"
                    class="main-progress"
                />

                <div class="storage-stats">
                  <div class="stat-item">
                    <span class="stat-label">剩余空间</span>
                    <span class="stat-value">{{ remainingText }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">使用率</span>
                    <span :class="['stat-value', percentage >= 90 ? 'danger' : '']">{{ percentage }}%</span>
                  </div>
                </div>
              </div>
            </div>
          </a-col>

          <!-- 右侧：饼图 -->
          <a-col :span="10">
            <div class="storage-chart">
              <div :style="getPieChartStyle()" class="pie-chart">
                <div class="chart-center">
                  <div class="chart-percentage">{{ percentage }}%</div>
                  <div class="chart-label">已使用</div>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>

        <!-- 容量告警 -->
        <a-alert
            v-if="percentage >= 80"
            :message="getWarningMessage()"
            :type="percentage >= 90 ? 'error' : 'warning'"
            show-icon
            style="margin-top: 16px"
        />
      </a-card>
    </template>

    <!-- 卡片模式：用于空间列表 -->
    <template v-else-if="mode === 'card'">
      <div class="storage-card">
        <div class="storage-card-header">
          <CloudServerOutlined class="storage-icon"/>
          <span class="storage-text">{{ usedText }} / {{ totalText }}</span>
        </div>
        <a-progress
            :percent="percentage"
            :show-info="false"
            :status="getStatus()"
            :stroke-color="getProgressColor()"
            size="small"
        />
      </div>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.storage-display {
  width: 100%;
}

// 紧凑模式
.storage-compact {
  .storage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;

    .storage-label {
      font-size: 14px;
      color: #666;
    }

    .storage-value {
      font-size: 13px;
      color: #999;
      font-weight: 500;
    }
  }
}

// 详细模式
.storage-detailed {
  .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
  }

  .storage-info {
    .storage-main {
      .size-display {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-bottom: 24px;

        .size-item {
          display: flex;
          flex-direction: column;
          align-items: center;

          .size-label {
            font-size: 12px;
            color: #999;
            margin-bottom: 4px;
          }

          .size-value {
            font-size: 24px;
            font-weight: 600;

            &.used {
              color: #1890ff;
            }

            &.total {
              color: #666;
            }
          }
        }

        .size-divider {
          font-size: 20px;
          color: #d9d9d9;
          margin: 0 8px;
        }
      }

      .main-progress {
        margin-bottom: 16px;
      }

      .storage-stats {
        display: flex;
        justify-content: space-around;
        padding: 16px 0;
        background: #fafafa;
        border-radius: 8px;

        .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;

          .stat-label {
            font-size: 12px;
            color: #999;
            margin-bottom: 4px;
          }

          .stat-value {
            font-size: 18px;
            font-weight: 600;
            color: #333;

            &.danger {
              color: #ff4d4f;
            }
          }
        }
      }
    }
  }

  .storage-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .pie-chart {
      width: 180px;
      height: 180px;
      border-radius: 50%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

      .chart-center {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .chart-percentage {
          font-size: 32px;
          font-weight: 700;
          color: #333;
        }

        .chart-label {
          font-size: 12px;
          color: #999;
          margin-top: 4px;
        }
      }
    }
  }
}

// 卡片模式
.storage-card {
  .storage-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #666;

    .storage-icon {
      font-size: 16px;
      color: #1890ff;
    }

    .storage-text {
      font-weight: 500;
    }
  }
}
</style>